<template>
  <div class="contrain"
       style='margin-bottom: 50px;'>
    <div>
      <van-swipe class="my-swipe"
                 :autoplay="2000"
                 touchable
                 indicator-color="white">
        <van-swipe-item v-for="(item, i) in img"
                        :key="i">
          <img v-lazy="$upload+item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid border
                clickable
                :column-num="Cate.length">
        <van-grid-item v-for="(item, i) in Cate"
                       :key="i"
                       :icon="item.icon"
                       :text="item.name"
                       :to='"/introduction/"+item.path' />
      </van-grid>
    </div>
    <router-view />
  </div>
</template>
<script>
import { getCate, getChart } from '@/api/interface'
export default {
  data () {
    return {
      img: [],
      Cate: []
    }
  },
  methods: {
    fetch () {
      getChart().then(res => {
        this.img = res.data
      })
      getCate().then(res => {
        this.Cate = res.data
      })
    }
  },
  created () {
    this.fetch()
  }
}
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
}
.my-swipe {
  width: 100%;
  height: 200px;
}
</style>
